import React from 'react';
import classNames from 'classnames';

import { NumberSettingFormatter } from '@/pages/SalaryManage/components/NumberFormatter';
import { getOrganizationName } from '@/pages/SalaryManage/components/OrganizationName';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';
import CurrencyText from '@/pages/SalaryManage/components/CurrencyText';
import { getCurrentOrgCountryCode } from '@/pages/SalaryManage/utils';

import styles from './index.less';

const Template = () => (
    <tr style={{ height: 'auto' }}>
        <th style={{ height: '0px', width: '30%', padding: 0, border: 'none' }} />
        <th style={{ height: '0px', width: '20%', padding: 0, border: 'none' }} />
        <th style={{ height: '0px', width: '30%', padding: 0, border: 'none' }} />
        <th style={{ height: '0px', width: '20%', padding: 0, border: 'none' }} />
    </tr>
);

const getLogo = companyInfo => companyInfo?.logoFile?.[0]?.url;

const SalaryItemPreview = ({ model }) => {
    const addItems = model.addItems || [];
    const lessItems = model.lessItems || [];
    const iterateArray = addItems.length >= lessItems.length ? addItems : lessItems;

    return (
        <>
            {iterateArray.map((salaryItem, index) => (
                <tr key={salaryItem.key} className={styles.salaryItemBox}>
                    <td className={styles.textTop}>
                        {addItems[index] ? (
                            <div key={addItems.key} className={styles.salaryItem}>
                                <div className={styles.bold}>{addItems[index].title}</div>
                                {addItems[index]?.children?.length > 0
                                    ? addItems[index]?.children.map(child => <div key={child.key}>-{child.title}</div>)
                                    : null}
                            </div>
                        ) : null}
                    </td>
                    <td className={styles.textTop}>
                        {addItems[index] ? (
                            <div key={addItems.key} className={styles.salaryItem}>
                                <div className={classNames(styles.textRight, salaryStyle.currency)}>
                                    <NumberSettingFormatter value={addItems[index].value} />
                                </div>
                                {addItems[index]?.children?.length > 0
                                    ? addItems[index]?.children.map(child => (
                                        <div
                                            key={child.key}
                                            className={classNames(styles.textRight, salaryStyle.currency)}
                                          >
                                            {child.columnType === 0 ? (
                                                <EmptyPlaceHolder value={child.value} />
                                              ) : (
                                                  <NumberSettingFormatter value={child.value} />
                                              )}
                                        </div>
                                      ))
                                    : null}
                            </div>
                        ) : null}
                    </td>
                    <td className={styles.textTop}>
                        {lessItems[index] ? (
                            <div key={lessItems.key} className={styles.salaryItem}>
                                <div className={styles.bold}>{lessItems[index].title}</div>
                                {lessItems[index]?.children?.length > 0
                                    ? lessItems[index]?.children.map(child => <div key={child.key}>-{child.title}</div>)
                                    : null}
                            </div>
                        ) : null}
                    </td>
                    <td className={styles.textTop}>
                        {lessItems[index] ? (
                            <div key={lessItems.key} className={styles.salaryItem}>
                                <div className={classNames(styles.textRight, salaryStyle.currency)}>
                                    <NumberSettingFormatter value={lessItems[index].value} />
                                </div>
                                {lessItems[index]?.children?.length > 0
                                    ? lessItems[index]?.children.map(child => (
                                        <div
                                            key={child.key}
                                            className={classNames(styles.textRight, salaryStyle.currency)}
                                          >
                                            {child.columnType === 0 ? (
                                                <EmptyPlaceHolder value={child.value} />
                                              ) : (
                                                  <NumberSettingFormatter value={child.value} />
                                              )}
                                        </div>
                                      ))
                                    : null}
                            </div>
                        ) : null}
                    </td>
                </tr>
            ))}
        </>
    );
};

const Preview = ({ model, checkedStaffInfo, companyInfo }) => (
    <div className={styles.preview}>
        <div className={styles.head}>
            <span>{getOrganizationName(model.organizationCode)}</span>
            <span className={styles.logo}>
                {getLogo(companyInfo) ? <img src={getLogo(companyInfo)} alt="logo" width={80} height={80} /> : null}
            </span>
        </div>
        <div className={styles.basicInfo}>
            <div className={styles.left}>
                <div className={styles.secrecyLevel}>严格保密 & 机密</div>
                <div className={styles.period}>
                    薪资计算期间：从{model.salaryStartDate}到{model.salaryEndDate}
                </div>
                <div className={styles.item}>
                    <span className={styles.label}>组织机构：</span>
                    <span className={styles.description}>{model.departmentName}</span>
                </div>
                <div className={styles.item}>
                    <span className={styles.label}>付款周期：</span>
                    <span className={styles.description}>{model.payBasis}</span>
                </div>
                <div className={styles.item}>
                    <span className={styles.label}>付款方式：</span>
                    <span className={styles.description}>{model.payMode}</span>
                </div>
                <div className={styles.item}>
                    <span className={styles.label}>账号：</span>
                    <span className={styles.description}>{model.bankNo}</span>
                </div>
                <div className={styles.item}>
                    <span className={styles.label}>付款日期：</span>
                    <span className={styles.description}>{model.payDate}</span>
                </div>
            </div>
            <div className={styles.right}>
                <div className={styles.title}>员工信息</div>
                <div className={styles.info}>
                    {checkedStaffInfo?.length > 0
                        ? checkedStaffInfo.map(item => <div key={Object.keys(item)[0]}>{Object.values(item)[0]}</div>)
                        : null}
                </div>
            </div>
        </div>
        <div className={styles.currencySign}>
            币种：
            <CurrencyText countryCode={getCurrentOrgCountryCode(model.organizationCode)} />
        </div>
        <div className={styles.body}>
            <table>
                <tbody>
                    <Template />
                    <tr>
                        <th colSpan={2} className={styles.textCenter}>
                            薪资加项
                        </th>
                        <th colSpan={2} className={styles.textCenter}>
                            薪资减项
                        </th>
                    </tr>
                    <tr>
                        <th>薪资项</th>
                        <th className={styles.textRight}>金额</th>
                        <th>薪资项</th>
                        <th className={styles.textRight}>金额</th>
                    </tr>
                    <SalaryItemPreview model={model} />
                    <tr>
                        <td className={classNames(styles.textLeft, styles.bold)}>薪资加项合计</td>
                        <td className={classNames(styles.textRight, salaryStyle.currency)}>
                            <NumberSettingFormatter value={model.allAmount} />
                        </td>
                        <td className={classNames(styles.textLeft, styles.bold)}>薪资减项合计</td>
                        <td className={classNames(styles.textRight, salaryStyle.currency)}>
                            <NumberSettingFormatter value={model.lessAmount} />
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td className={classNames(styles.textLeft, styles.bold)}>实发薪资</td>
                        <td className={classNames(styles.textRight, salaryStyle.currency)}>
                            <NumberSettingFormatter value={model.encryptTotalPayAmt} />
                        </td>
                    </tr>
                    <tr>
                        <td colSpan={4} className={styles.noPadding}>
                            <table>
                                <tbody>
                                    <Template />
                                    <tr>
                                        <td className={classNames(styles.textLeft, styles.bold, styles.borderRight)}>
                                            CPF 雇主缴交金额
                                        </td>
                                        <td
                                            className={classNames(
                                                styles.textRight,
                                                salaryStyle.currency,
                                                styles.borderRight
                                            )}
                                        >
                                            <NumberSettingFormatter value={model.encryptCPFEmployerAmt} />
                                        </td>
                                        <td className={classNames(styles.borderRight)}>&nbsp;</td>
                                        <td className={classNames(salaryStyle.currency)}>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td
                                            className={classNames(
                                                styles.textLeft,
                                                styles.bold,
                                                styles.pt0,
                                                styles.borderRight
                                            )}
                                        >
                                            CPF雇主缴交金额（累计值）
                                        </td>
                                        <td
                                            className={classNames(
                                                styles.textRight,
                                                salaryStyle.currency,
                                                styles.pt0,
                                                styles.borderRight
                                            )}
                                        >
                                            <NumberSettingFormatter value={model.encryptTotalCPFEmployerAmt} />
                                        </td>
                                        <td
                                            className={classNames(
                                                styles.textLeft,
                                                styles.bold,
                                                styles.pt0,
                                                styles.borderRight
                                            )}
                                        >
                                            CPF雇员缴交金额（累计值）
                                        </td>
                                        <td className={classNames(styles.textRight, salaryStyle.currency, styles.pt0)}>
                                            <NumberSettingFormatter value={model.encryptTotalCPFEmployeeAmt} />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div className={styles.tail}>{model.staffTips}</div>
    </div>
);

export default Preview;
